<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<style>
	body {margin: 0; padding: 10px 10px 22px 10px; background-color: #ffffff}
	h1 {margin: 5px 0 0 0; font-size: 18px; font-weight: normal; text-align: center}
	header {margin: -24px 0 5px 0; line-height: 24px}
	button {font: 12px sans-serif; cursor: pointer}
	p {position: fixed; bottom: 0; margin: 0; padding: 2px 3px 2px 3px; outline: 1px solid #ffc000; display: none; overflow: hidden; white-space: nowrap; background-color: #ffffe0}
	a {color: #0366d6}
	#hl {position: absolute; display: none; overflow: hidden; white-space: nowrap; pointer-events: none; background-color: #ffffe0; outline: 1px solid #ffc000; height: 15px}
	#hl span {padding: 0 3px 0 3px}
	#status {left: 0}
	#match {right: 0}
	#reset {cursor: pointer}
	#canvas {width: 100%; height: /*height:*/300px}
</style>
</head>
<body style='font: 12px Verdana, sans-serif'>
<h1>/*title:*/</h1>
<header style='text-align: left'><button id='inverted' title='Invert'>&#x1f53b;</button>&nbsp;&nbsp;<button id='search' title='Search'>&#x1f50d;</button></header>
<header style='text-align: right'>Produced by <a href='https://github.com/async-profiler/async-profiler'>async-profiler</a></header>
<canvas id='canvas'></canvas>
<div id='hl'><span></span></div>
<p id='status'></p>
<p id='match'>Matched: <span id='matchval'></span> <span id='reset' title='Clear'>&#x274c;</span></p>
<script>
	// Copyright The async-profiler authors
	// SPDX-License-Identifier: Apache-2.0
	'use strict';
	let root, px, pattern;
	let level0 = 0, left0 = 0, width0 = 0;
	let nav = [], navIndex, matchval;
	let inverted = /*inverted:*/false;
	const levels = Array(/*depth:*/0);
	for (let h = 0; h < levels.length; h++) {
		levels[h] = [];
	}

	const canvas = document.getElementById('canvas');
	const c = canvas.getContext('2d');
	const hl = document.getElementById('hl');
	const status = document.getElementById('status');

	const canvasWidth = canvas.offsetWidth;
	const canvasHeight = canvas.offsetHeight;
	canvas.style.width = canvasWidth + 'px';
	canvas.width = canvasWidth * (devicePixelRatio || 1);
	canvas.height = canvasHeight * (devicePixelRatio || 1);
	if (devicePixelRatio) c.scale(devicePixelRatio, devicePixelRatio);
	c.font = document.body.style.font;

	const palette = [
		[0xb2e1b2, 20, 20, 20],
		[0x50e150, 30, 30, 30],
		[0x50cccc, 30, 30, 30],
		[0xe15a5a, 30, 40, 40],
		[0xc8c83c, 30, 30, 10],
		[0xe17d00, 30, 30,  0],
		[0xcce880, 20, 20, 20],
	];

	function getColor(p) {
		const v = Math.random();
		return '#' + (p[0] + ((p[1] * v) << 16 | (p[2] * v) << 8 | (p[3] * v))).toString(16);
	}

	function f(key, level, left, width, inln, c1, int) {
		levels[level0 = level].push({level, left: left0 += left, width: width0 = width || width0,
			color: getColor(palette[key & 7]), title: cpool[key >>> 3],
			details: (int ? ', int=' + int : '') + (c1 ? ', c1=' + c1 : '') + (inln ? ', inln=' + inln : '')
		});
	}

	function u(key, width, inln, c1, int) {
		f(key, level0 + 1, 0, width, inln, c1, int)
	}

	function n(key, width, inln, c1, int) {
		f(key, level0, width0, width, inln, c1, int)
	}

	function samples(n) {
		return n === 1 ? '1 sample' : n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' samples';
	}

	function pct(a, b) {
		return a >= b ? '100' : (100 * a / b).toFixed(2);
	}

	function findFrame(frames, x) {
		let left = 0;
		let right = frames.length - 1;

		while (left <= right) {
			const mid = (left + right) >>> 1;
			const f = frames[mid];

			if (f.left > x) {
				right = mid - 1;
			} else if (f.left + f.width <= x) {
				left = mid + 1;
			} else {
				return f;
			}
		}

		if (frames[left] && (frames[left].left - x) * px < 0.5) return frames[left];
		if (frames[right] && (x - (frames[right].left + frames[right].width)) * px < 0.5) return frames[right];

		return null;
	}

	function removeStack(left, width) {
		for (let h = 0; h < levels.length; h++) {
			const frames = levels[h], newFrames = [];
			for (let i = 0; i < frames.length; i++) {
				const f = frames[i];
				if (f.left >= left + width) {
					f.left -= width;
				} else if (f.left + f.width > left) {
					if ((f.width -= width) <= 0 && h) continue;
				}
				newFrames.push(f);
			}
			levels[h] = newFrames;
		}
	}

	function search(r) {
		if (r === true && (r = prompt('Enter regexp to search:', '')) === null) {
			return;
		}

		pattern = r ? RegExp(r) : undefined;
		const matched = render(root, nav = []);
		navIndex = -1;
		document.getElementById('matchval').textContent = matchval = pct(matched, root.width) + '%';
		document.getElementById('match').style.display = r ? 'inline-block' : 'none';
	}

	function render(newRoot, nav) {
		if (root) {
			c.fillStyle = '#ffffff';
			c.fillRect(0, 0, canvasWidth, canvasHeight);
		}

		root = newRoot || levels[0][0];
		px = canvasWidth / root.width;

		const x0 = root.left;
		const x1 = x0 + root.width;
		const marked = [];

		function mark(f) {
			return marked[f.left] || (marked[f.left] = f);
		}

		function totalMarked() {
			let total = 0;
			let left = 0;
			Object.keys(marked).sort(function(a, b) { return a - b; }).forEach(function(x) {
				if (+x >= left) {
					const m = marked[x];
					if (nav) nav.push(m);
					total += m.width;
					left = +x + m.width;
				}
			});
			return total;
		}

		function drawFrame(f, y) {
			if (f.left < x1 && f.left + f.width > x0) {
				c.fillStyle = pattern && f.title.match(pattern) && mark(f) ? '#ee00ee' : f.color;
				c.fillRect((f.left - x0) * px, y, f.width * px, 15);

				if (f.width * px >= 21) {
					const chars = Math.floor(f.width * px / 7);
					const title = f.title.length <= chars ? f.title : f.title.substring(0, chars - 2) + '..';
					c.fillStyle = '#000000';
					c.fillText(title, Math.max(f.left - x0, 0) * px + 3, y + 12, f.width * px - 6);
				}

				if (f.level < root.level) {
					c.fillStyle = 'rgba(255, 255, 255, 0.5)';
					c.fillRect((f.left - x0) * px, y, f.width * px, 15);
				}
			}
		}

		for (let h = 0; h < levels.length; h++) {
			const y = inverted ? h * 16 : canvasHeight - (h + 1) * 16;
			const frames = levels[h];
			for (let i = 0; i < frames.length; i++) {
				drawFrame(frames[i], y);
			}
		}

		return totalMarked();
	}

	function unpack(cpool) {
		for (let i = 1; i < cpool.length; i++) {
			cpool[i] = cpool[i - 1].substring(0, cpool[i].charCodeAt(0) - 32) + cpool[i].substring(1);
		}
	}

	canvas.onmousemove = function() {
		const h = Math.floor((inverted ? event.offsetY : (canvasHeight - event.offsetY)) / 16);
		if (h >= 0 && h < levels.length) {
			const f = findFrame(levels[h], event.offsetX / px + root.left);
			if (f) {
				if (f !== root) getSelection().removeAllRanges();
				hl.style.left = (Math.max(f.left - root.left, 0) * px + canvas.offsetLeft) + 'px';
				hl.style.width = (Math.min(f.width, root.width) * px) + 'px';
				hl.style.top = ((inverted ? h * 16 : canvasHeight - (h + 1) * 16) + canvas.offsetTop) + 'px';
				hl.firstChild.textContent = f.title;
				hl.style.display = 'block';
				canvas.title = f.title + '\n(' + samples(f.width) + f.details + ', ' + pct(f.width, levels[0][0].width) + '%)';
				canvas.style.cursor = 'pointer';
				canvas.onclick = function() {
					if (event.altKey && h >= root.level) {
						removeStack(f.left, f.width);
						root.width > f.width ? render(root) : render();
					} else if (f !== root) {
						render(f);
					}
					canvas.onmousemove();
				};
				status.textContent = 'Function: ' + canvas.title;
				status.style.display = 'inline-block';
				return;
			}
		}
		canvas.onmouseout();
	}

	canvas.onmouseout = function() {
		hl.style.display = 'none';
		status.style.display = 'none';
		canvas.title = '';
		canvas.style.cursor = '';
		canvas.onclick = null;
	}

	canvas.ondblclick = function() {
		getSelection().selectAllChildren(hl);
	}

	document.getElementById('inverted').onclick = function() {
		inverted = !inverted;
		render();
	}

	document.getElementById('search').onclick = function() {
		search(true);
	}

	document.getElementById('reset').onclick = function() {
		search(false);
	}

	window.onkeydown = function(event) {
		if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
			event.preventDefault();
			search(true);
		} else if (event.key === 'Escape') {
			search(false);
		} else if ((event.key === 'n' || event.key === 'N') && nav.length > 0) {
			navIndex = (navIndex + (event.shiftKey ? nav.length - 1 : 1)) % nav.length;
			render(nav[navIndex]);
			document.getElementById('matchval').textContent = matchval + ' (' + (navIndex + 1) + ' of ' + nav.length + ')';
			window.scroll(0, inverted ? root.level * 16 : canvasHeight - (root.level + 1) * 16);
			canvas.onmousemove();
		}
	}

const cpool = [
/*cpool:*/
];
unpack(cpool);

/*frames:*/
search(/*highlight:*/);
</script></body></html>
